<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box1" style="display: inline-block; width: 500px; height: 500px"></div>
    <div id="box2" style="display: inline-block; width: 500px; height: 500px"></div>
    <div id="box3" style="display: inline-block; width: 500px; height: 500px"></div>

    <script src="../echarts.min.js"></script>
    <script>
      ;(function () {
        const chart1 = echarts.init(document.querySelector('#box1'))
        chart1.setOption({
          title: {
            text: 'ECharts 入门示例',
          },
          grid: {
            top: '50%',
          },
          tooltip: {},
          legend: {
            data: ['销量', '重要度'],
          },
          xAxis: {
            data: ['JavaScript', 'HTML', 'CSS', 'ECharts', 'jQuery'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [100, 20, 36, 10, 80],
            },
            {
              name: '重要度',
              type: 'bar',
              data: [1, 2, 3, 4, 5],
            },
          ],
        })

        const chart2 = echarts.init(document.querySelector('#box2'))
        chart2.setOption({
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })

        const chart3 = echarts.init(document.querySelector('#box3'))
        chart3.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              smooth: true,
            },
          ],
        })
      })()
    </script>
  </body>
</html>
